大家好，我是一名菜鳥工程師，Chris，今天來到第 15 天，JS 的 ES6 （上）

ES6 (ECMAScript 2015) 是 JavaScript 的一個重要版本，引入許多新的特性和語法，讓 JavaScript 更易於使用，以下會介紹 ES6 的用法

1 let、const、var

let 和 const 的出現，取代舊的 var

- var：變數範圍以函式區塊為分界
var 定義全域變數

function test() {
  for (var i = 0; i < 5; i++) {
    console.log(i);
  }
}
console.log(i); // 錯誤，找不到 i

- let：變數範圍以程式區塊(大括號)為分界
let 宣告在目前區塊作用的變數

function test() {
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
}
console.log(i); // 錯誤，找不到 i

- const：常數的資料不能變動

const x; // 錯誤，常數宣告必須給資料

const y = 1; // 常數宣告必須給資料
y = 2; // 錯誤，常數的資料不能變動

2 Hoisting 宣告提升

- 變數 var 提升

x =10 // 給定初始資料
alert(x); // 使用變數，印出 10
var x; // 宣告變數

• 程式碼不會提升

**alert(x); // 使用變數，印出 undefined
var x=10; // 宣告變數，同時給定初始資料**

- 函式 function 提升

test( ); // 呼叫函式

function test( ){ 
  alert(”hello”);  
}

• 程式碼不會提升

test( ); // 呼叫函式

var test=function ( ){ 
  alert(”hello”);  
}

3 Arrow Function 箭頭函式
箭頭函式 : 函式的另外一種寫法，省去 function，用 ⇒ 取代

const functionName = (parameters) => {
  return result;
};

• parameters：函式的參數，可以不給參數、1個或多個參數，用括號括起來
• =>：箭頭函式的標誌
• return：傳回函式結果

箭頭函式簡化語法 : 當箭頭函式只有回傳值，沒有其他指令時，可簡化

• 可簡化的箭頭函式

let add = (n1, n2)  ⇒  {
  return  n1 - n2 ;
}

• 箭頭函式簡化後的寫法

let add = (n1 , n2)  ⇒  (n1 - n2);

4 Default Parameter 參數的預設值

• JS 舊寫法

function new(mes) {
  console.log(mes);
}

• ES6 新寫法

function multiply1(n1, n2 = 2) {
  return n1 * n2;
}
console.log(multiply1(3, 4));  // 3*4=12
console.log(multiply1(5));  // 5*2=10

• 可以用箭頭函式

let multiply2 = (n1, n2 = 3) => n1 * n2;
console.log(multiply2(4));  // 4*3=12

• 若未給資料，直接採用 = 後方指定的資料

function combine( first = "Heng", last = "Liu", myname = first + " " + last){
  console.log(myname);
}
  combine("Jom", "Chen");  // Jom Chen
  combine("Mary");  // Mary Liu
  combine();  // Heng Liu

5 Destructuring Assignment 解構賦值
解構賦值 : 先解構，後賦值

- 解構 : 把陣列或物件中的資料拆開

- 賦值 : 將拆開的資料分別放入個別的變數中

陣列的解構賦值

• 一般做法

let arr=[3,4,5];

let d1=arr[0];
let d2=arr[1];
let d3=arr[2];

• 解構賦值做法

let arr=[3,4,5];

let [d1,d2,d3]=arr;

陣列解構賦值的變形寫法
- 宣告與賦值分開

let arr=[3,4,5];

let d1, d2, d3;
[d1,d2,d3]=arr;

- 給預設值

let arr=[3,4];
    
let d1, d2, d3;
[d1,d2=2,d3=5]=arr;

物件的解構賦值

• 一般做法

let obj={x:3, y:4};

let x=obj.x;
let y=obj.y;

• 解構賦值做法

let obj={x:3, y:4};

let {x, y}=obj;

物件解構賦值的變形寫法
- 宣告與賦值分開

let obj={x:3, y:4};

let x, y;
({x, y}=obj) ;    // 不和宣告一起執行，要多加(  )

- 給預設值

let obj={x:3};

let x, y;
({x, y=5}=obj);

- 指定新的變數名稱

let obj={x:3, y:4};

let newX, newY;
({x:newX, y:newY}=obj);

今天就介紹到這邊，那我們明天見囉～～

明天預計內容：JS 的 ES6 （下）!!!